<template>
  <div>
x轴：{{mouse.x}}=={{x}}
<br>
y轴：{{mouse.y}}=={{y}}
  </div>
</template>

<script>
import {reactive,toRefs,onMounted}  from 'vue'
const mouseHandle=()=>{
  const mouse=reactive({
    x:0,
    y:0
  })
  /* 2-监听鼠标移动事件 */
  onMounted(()=>{
    window.addEventListener('mousemove',(e)=>{
      mouse.x=e.pageX
      mouse.y=e.pageY
    })
  })
  return mouse
}
export default {
  setup () {
    // /* 1-定义数据 */
    // const mouse=reactive({
    //   x:0,
    //   y:0
    // })
    // /* 2-监听鼠标移动事件 */
    // onMounted(()=>{
    //   window.addEventListener('mousemove',(e)=>{
    //     mouse.x=e.pageX
    //     mouse.y=e.pageY
    //   })
    // })
    // return {mouse,...toRefs(mouse)}

    const mouse=mouseHandle()

    return {mouse,...toRefs(mouse)}
  }
}
</script>

<style lang="scss" scoped>

</style>